<template>
    <editor v-model="content" :lang="mode" @init="editorInit" :theme="theme" width="100%" :height="height"/>
</template>

<script>
    export default {
      name: "CodeEdit",
      components: { editor: require('vue2-ace-editor')},
      props: {
        data:  {
          type:String
        },
        height: {
          type:Number
        },
        theme: {
          type: String,
          default() {
            return 'chrome'
          }
        },
        readOnly: {
          type: Boolean,
          default() {
            return false;
          }
        },
        mode: {
          type: String,
          default() {
            return 'text';
          }
        },
        modes: {
          type: Array,
          default() {
            return ['text', 'xml', 'html', 'python'];
          }
        }
      },
      watch: {
        content(){
          this.$emit('update:data', this.content);
        },
        data(){
          this.content = this.data;
        }
      },
      data() {
        return {
          content: null
        }
      },
      mounted() {
        this.content = this.data;
      },
      methods: {
        editorInit: function (editor) {
          require('brace/ext/language_tools') //language extension prerequsite...
          this.modes.forEach(mode => {
            require('brace/mode/' + mode); //language
          });
          require('brace/theme/' + this.theme)
          require('brace/snippets/javascript') //snippet
          if (this.readOnly) {
            editor.setReadOnly(true);
          }
        },
      }
    }
</script>

<style scoped>

</style>
